<template>
  <div>
    <div class="index-box">
      <!-- 顶部-蓝 -->
      <div class="top-box">
        <div>
          <div>
            {{titleInfo.serviceEnterpriseNum}}
            <span>家</span>
          </div>
          <div class="bottom-info">已服务商家</div>
        </div>
        <div>
          <div>
            {{titleInfo.financingTotalAmount}}
            <span>万</span>
          </div>
          <div class="bottom-info">累计节省开支(元)</div>
        </div>
        <div>
          <div>
            {{titleInfo.fastSpeed}}
            <span>分钟</span>
          </div>
          <div class="bottom-info">最快联系</div>
        </div>
      </div>
      <!-- 下部内容 -->
      <div class="middle-box">
        <Banner :sliderList="sliderList"></Banner>
        <div class="mt30 info-title">在线金融服务</div>
        <div class="mt15 estimate-box">
          <div class="money-title">您的预估额度为</div>
          <div class="money-box">
            <div>
              {{estimate}}
              <span>元</span>
            </div>
            <router-link to="/assessment" class="button-box">立即评估</router-link>
          </div>
        </div>
        <Procedure class="mt15"></Procedure>
        <div v-if="lastApply.id" class="mt15 company-box">
          <div class="company-div">
            <div class="company-info">{{lastApply.enterpriseName}}</div>
            <div>{{lastApply.alreadyApply ? "已评估" : "未评估"}}</div>
          </div>
          <div class="time-div">
            <div>{{lastApply.lastApplyTime}}</div>
            <router-link :to="'/bgDetails/' + lastApply.enterpriseId" class="buttontime-div">查看</router-link>
          </div>
        </div>
        <div class="info-box">
          <div class="button-img">
            <img src="../../assets/image/buttom-tag.png" alt />
          </div>
          <div class="info">金融融资平台，全程为您服务</div>
        </div>
      </div>
      <Box/>
    </div>
  </div>
</template>

<script>
import Procedure from "components/Procedure";
import Banner from "components/Banner";
import { getBanner, getIndexNumber, getLastApply } from "api/Home";
import Box from "components/Box"
import dateFormat from 'utils/dateFormat'
export default {
  data() {
    return {
      sliderList: [],
      lastApply: {},
      titleInfo: {
        fastSpeed: 0,
        financingTotalAmount: 0,
        serviceEnterpriseNum: 0,
      },
      estimate: "?000,000",
    };
  },
  components: {
    Banner,
    Procedure,
    Box
  },
  mounted() {
    getBanner("product_service_publicity").then(({ code, data, message }) => {
      if (!code) {
        this.sliderList = data;
      } else {
        this.$toast(message);
      }
    });

    getIndexNumber().then(({ code, data, message }) => {
      if (!code) {
        this.titleInfo = data;
      } else {
        this.$toast(message);
      }
    });

    getLastApply().then(({ code, data, message }) => {
        if (!code) {
            data.lastApplyTime = dateFormat(new Date(data.lastApplyTime), 'yyyy-MM-dd HH:mm:ss')
            this.lastApply = data;
        } else {
            this.$toast(message)
        }
    })
  },
};
</script>

<style lang="stylus" scoped>
@import '../../assets/styl/mixin.styl'
.index-box
  // height 100vh
  background $backColor
  margin-bottom rem(49)
  .top-box
    background $baseColor
    height rem(105)
    display flex
    justify-content space-around
    align-items center
    color $infoColor
    font-size rem(28)
    font-weight Semibold
    div
      font-weight Regular
    span
      font-size rem(12)
    .bottom-info
      font-size rem(12)
      margin-top rem(5)
      opacity 0.5
  .middle-box
    padding rem(15)
    padding-bottom 0
    overflow hidden
    .info-title
      font-weight 600
      font-size rem(20)
    .mt15
      margin-top rem($m15)
    .mt30
      margin-top rem($m30)
    .estimate-box
      display flex
      flex-direction column
      background $infoColor
      padding rem(20) rem(15)
      .money-title
        color $titleColor
        font-size rem($ft16)
        margin-bottom rem(11.5)
        font-weight 600
      .money-box
        display flex
        justify-content space-between
        div
          font-size rem(28)
          color #FF4D4F
          span
            font-size rem(12)
        .button-box
          background #FF4D4F
          border-radius rem(16.5)
          height rem(35)
          width rem(100)
          line-height rem(35)
          text-align center
          color $infoColor
          font-weight Semibold
          box-shadow 0 rem(1) rem(5) #FF4D4F
    .company-box
      color $fontColor
      font-size rem(12)
      display flex
      flex-direction column
      padding rem(10) rem(15)
      background $infoColor
      border-radius rem(5)
      .company-div
        display flex
        justify-content space-between
        .company-info
          color $titleColor
          font-size rem($ft16)
          font-weight 600
          margin-bottom rem(20.5)
      .time-div
        display flex
        justify-content space-between
        color #999999
        font-size rem(12)
        align-items center
        .buttontime-div
          background $baseColor
          width rem(59)
          height rem(24)
          border-radius rem(12)
          color $infoColor
          text-align center
          line-height rem(24)
    .info-box
      margin rem(40) auto
      .button-img
        margin 0 auto
        width rem(150)
        height rem(15)
        img
          width 100%
          height 100%
      .info
        text-align center
        margin-top rem(5)
        color #ABABAB
        font-size rem(12)
.bottom-box
  position fixed
  bottom 0
  z-index 2
  background $infoColor
</style>